<!-- components/mpopup-header-item-new.vue -->
<template>
  <!-- 行容器 -->
  <view class="mpopup-body-row" :style="{ height: computedHeight }">
    <!-- 左侧标题列 -->
    <view class="left-column" :style="{ width: leftWidth }">
      <text class="label-text" v-if="showLabel">{{ label }}</text>
    </view>
    
    <!-- 右侧两列容器 -->
    <view class="right-columns">
      <!-- 中间列 -->
      <view class="middle-column">
        <view class="content-wrapper">
          <slot name="middle">{{ middleValue }}</slot>
        </view>
      </view>
      
      <!-- 右侧列 -->
      <view class="right-column">
        <view class="content-wrapper">
          <slot name="right">{{ rightValue }}</slot>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: 'mpopup-header-item',
  props: {
    height: {
      type: [String, Number],
      default: 'auto'
    },
    label: {
      type: String,
      default: '标题'
    },
    leftWidth: {
      type: String,
      default: '110px'
    },
    middleValue: {
      type: [String, Number],
      default: ''
    },
    rightValue: {
      type: [String, Number],
      default: ''
    },
    // 控制是否显示标题（用于多行合并情况）
    showLabel: {
      type: Boolean,
      default: true
    }
  },
  computed: {
    computedHeight() {
      if (typeof this.height === 'number') return `${this.height}px`
      if (typeof this.height === 'string' && this.height.includes('rpx')) {
        return this.height
      }
      return this.height || 'auto'
    }
  }
}
</script>

<style scoped>
/* 行容器 */
.mpopup-body-row {
  display: flex;
  min-height: 60px;
  background: #e9f1fe;
  border: 1px solid #757575;
  border-bottom: none;
  position: relative;
}

/* 左侧标题列 */
.left-column {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  border-right: 1px solid #757575;
  padding: 12px;
  box-sizing: border-box;
  background: inherit;
  position: relative;
  z-index: 1;
}

/* 右侧两列容器 */
.right-columns {
  flex: 1;
  min-width: 0;
  display: flex;
}

/* 公共列样式 */
.middle-column, .right-column {
  flex: 1;
  min-width: 0;
  position: relative;
}

/* 中间列边框处理 */
.middle-column {
  border-right: 1px solid #757575;
}

/* 内容区域 */
.content-wrapper {
  height: 100%;
  width: 100%;
  padding: 12px;
  box-sizing: border-box;
  background: white;
  display: flex;
  align-items: center;
  word-break: break-all;
  min-height: 60px;
}

.label-text {
  text-align: center;
  word-break: break-all;
}

/* 多行合并时的边框处理 */
.mpopup-body-row:not(:first-child) .left-column::before {
  content: '';
  position: absolute;
  top: -1px;
  left: 0;
  right: 0;
  height: 1px;
  background: #757575;
}
</style>